<template>
    <div>
        <MyHeader :receive="receive"></MyHeader>
        <MyList :todos="todos" :updateCheckTodo="updateCheckTodo" :deleteTodo="deleteTodo"></MyList>
        <MyFooter></MyFooter>
    </div>
</template>

<script>
    // 后引入的css会覆盖掉先引入的css
    import MyHeader from "./components/MyHeader"
    import MyList from "./components/MyList"
    import MyFooter from "./components/MyFooter"
    export default {
        name:"App",
        components:{
            MyHeader,
            MyList,
            MyFooter,
        },
        data(){
            return{
                todos:[
                    {id:"001", title:"抽烟", done:false},
                    {id:"002", title:"喝酒", done:true},
                    {id:"003", title:"睡觉", done:false},
                ],
            }
        },
        methods:{
            receive(todoObj){
                console.log('tag', todoObj)
                // 需要调用数组的可以检测到的方法
                this.todos.unshift(todoObj)
            },
            // 改
            updateCheckTodo(id){
                this.todos.forEach((todo) => {
                    if(todo.id === id){
                        todo.done = !todo.done
                    }
                })
            },
            // 删除
            deleteTodo(id){
                // this.todos = this.todos.filter((todo, index, array) => {
                //     return todo.id !== id
                // })
                // 可以精简成
                this.todos = this.todos.filter(todo => todo.id !== id)
            }
        }
    }
</script>
